<template>
  <header>解说排名榜</header>
  <main>
    <ul v-if="loading" class="com__container">
      <li v-for="(_, index) in 10" :key="`${index}-ske`">
        <p class="sinear">Top.{{ index + 1 }}</p>
        <div class="avatar-container">
          <n-skeleton height="80px" width="80px" circle animated />
        </div>
        <div class="text-container">
          <n-skeleton :width="162" height="20px" round size="medium" />
          <n-skeleton :width="132" height="20px" round size="medium" />
        </div>
        <div class="count-container">
          <n-skeleton :width="80" height="20px" round size="medium" />
        </div>
      </li>
    </ul>
    <ul v-else class="com__container">
      <li v-for="(item, index) in commentary" :key="index">
        <p class="sinear">Top.{{ index + 1 }}</p>
        <div class="avatar-container">
          <img v-if="item.UserBase64" :src="item.UserBase64 || undefined" />
          <img v-else :src="defaultImg" @error="imgOnError" />
        </div>
        <div class="text-container">
          <p class="name-p">{{ item.chinaname }}</p>
          <p>已经加入ASG{{ item.joinDayCount }}天</p>
        </div>
        <div class="count-container">
          <p>{{ item.count }}</p>
        </div>
      </li>
    </ul>
  </main>
</template>

<script setup lang='ts'>
import { useMessage } from 'naive-ui';
import defaultImg from '/vite.svg';
import { getCommentaryRanking, CommentaryPersonVO } from '@/api/backend/count.ts';
const commentary = reactive<CommentaryPersonVO[]>([]);
const message = useMessage();
const loading = ref(true);
async function init() {
  try {
    loading.value = true;
    const response = await getCommentaryRanking();
    if (response!.code && response?.code !== 200) throw new Error('获取数据失败');
    commentary.length = 0;
    (response?.data ?? []).forEach((item) => {
      commentary.push(item);
    })
  } catch (error) {
    message.error('获取数据失败，请稍后重试');
  } finally {
    loading.value = false;
  }

}
init();
const imgOnError = (e:Event) => {
  let img = e.srcElement as HTMLImageElement;
  img.src = defaultImg;
  img.onerror = null; //防止闪图
}
</script>
<style scoped lang='scss'>
header {
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: bold;
}

main {
  width: 100%;

  .com__container {
    width: 80%;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;

    li {
      display: grid;
      grid-template-columns: 10% 30% 40% 20%;
      align-items: center;
      padding: 1rem 0;

      .sinear {
        text-align: center;
      }

      .avatar-container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
        }
      }

      .text-container {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        .name-p {
          font-weight: bold;
          font-size: 1.1rem;
        }
      }

      .count-container {
        width: 100%;

        p {
          width: 60%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          border-radius: 16px;
          background: rgb(128, 215, 88);
          color: #fff;
          padding: 0.3rem 0;
        }
      }
    }
  }
}
</style>